<template>
  <Page class="selector" :withAppBar="true">
    <!-- 头部搜索bar -->
    <AppBar class="search-bar" :leftWidth="40" :rightWidth="40">
      <!-- 左侧返回箭头 -->
      <img
        class="icon icon-back"
        src="@/assets/imgs/common/icon/icon_back.png"
        @click="back"
        slot="left"
      />
      <!-- 搜索框-非地区出现 -->
      <input
        v-show="type !== 'address'"
        class="search-ipt"
        type="search"
        :placeholder="searchPlaceholder"
        v-model="keywords"
        @focus="handlerIptFocus"
        @blur="handlerIptBlur"
        slot="center"
      />
      <!-- 提示内容-地区出现 -->
      <div v-show="type === 'address'" class="address-tips" slot="center">
        请选择所在地区
      </div>

      <!-- 右侧搜索按钮 -->
      <transition name="fadeIn05" slot="right">
        <img
          v-show="selectType === 'search'"
          class="icon icon-search"
          src="@/assets/imgs/common/icon/icon_search.png"
          @click="search"
        />
      </transition>
    </AppBar>

    <AppContent>
      <!-- 点击结果--外层(展示最顶层数据) -->
      <section
        v-show="selectType === 'click' && clickStack.length === 0"
        class="click-result-outer click-result result-content"
        :style="{ height: resultContentHeight }"
      >
        <p
          class="result-line"
          v-for="item of clickResult"
          :key="item.code"
          @click="handlerClickItemClick(item, 'next')"
        >
          {{ item.desc }}
        </p>
      </section>

      <!-- 点击结果--内层(阶梯式展示数据，分为上下两部分) -->
      <section
        v-show="selectType === 'click' && clickStack.length > 0"
        class="click-result-inner click-result result-content"
        :style="{ height: resultContentHeight }"
      >
        <!-- inner-top-list -->
        <div v-show="innerTopList.length > 0" class="inner-top-list">
          <p
            class="result-line"
            v-for="(item, index) of innerTopList"
            :key="item.code"
            @click="handlerClickItemClick(item, index)"
          >
            {{ item.desc }}
          </p>
        </div>

        <!-- inner-bottom-list -->
        <div v-show="innerBottomList.length > 0" class="inner-bottom-list">
          <p
            class="result-line"
            :class="{ active: isResultLineActive(item) }"
            v-for="item of innerBottomList"
            :key="item.code"
            @click="handlerClickItemClick(item, 'next')"
          >
            {{ item.desc }}
          </p>
        </div>
      </section>

      <!-- 搜索结果 -->
      <section
        class="search-result result-content"
        v-show="selectType === 'search'"
        :style="{ height: resultContentHeight }"
      >
        <!-- 有数据 -->
        <div class="have-data" v-show="searchResult && searchResult.length > 0">
          <p
            class="result-line"
            :class="{ active: isResultLineActive(item) }"
            v-for="item of searchResult"
            :key="item.code"
            v-html="item.showDesc || item.desc"
            @click="select(item)"
          ></p>
        </div>
        <!-- 无数据 -->
        <div class="no-data" v-show="!searchResult || searchResult.length == 0">
          {{ hadSearch ? "暂无数据" : "请输入关键字后开始搜索" }}
        </div>
      </section>
    </AppContent>
  </Page>
</template>

<script>
import jobMixin from "./mixin/job";
import addressMixin from "./mixin/address";
export default {
  name: "selector",
  mixins: [jobMixin, addressMixin],
  props: {
    // 当前选中数据
    selectData: {
      type: Object,
      default: function() {
        return [];
      }
    },
    // selector类型：job：职业，address：地区
    type: {
      type: String,
      default: "job"
    }
  },
  data() {
    return {
      isIptFocus: false, // 输入框是否获取焦点
      selectType: "click", // 选择类型，click直接选择，search查找后选择
      keywords: "", // 搜索关键字
      hadSearch: false, // 是否已经搜索过
      // click栈
      clickStack: [],
      // 点击结果
      clickResult: [],
      // 点击深度
      clickDeep: 0,
      // 搜索结果
      searchResult: []
    };
  },
  computed: {
    // inner上部内容
    innerTopList() {
      return this.clickStack;
    },
    // inner下部内容
    innerBottomList() {
      if (this.clickStack.length > 0) {
        // 有clickStack，显示堆栈最后一个元素的sonList
        return this.clickStack[this.clickStack.length - 1].sonList;
      } else {
        // 没有clickStack，返回空数组
        return [];
      }
    },
    // search的placeholder
    searchPlaceholder() {
      switch (this.type) {
        case "job": {
          return "请输入职业名称或职业代码";
        }
        case "address": {
          return "请输入所在地区";
        }
        default: {
          return "请输入职业名称或职业代码";
        }
      }
    },
    // resultContent高度
    resultContentHeight() {
      // 真实的searchBar高度
      const searchBarHeight = 60 * globalConfig.ui.pxRadio;
      // 顶部安全距离
      const safeTop = globalConfig.ui.safeTop;
      // resultContent高度
      return `calc(100vh - ${searchBarHeight}px - ${safeTop}px)`;
    }
  },
  created() {
    // 初始化组件
    this.initComp();
  },
  methods: {
    // 初始化组件
    initComp() {
      // 初始化第一级clickResult
      this.clickResult = this.getNextLevel();
      if (this.type === "job") {
        this.initJob();
      } else if (this.type === "address") {
        this.initAddress();
      }
    },

    // 根据id查询下一级的list
    getNextLevel(id) {
      // 分type查询
      return this[`${this.type}GetNextLevel`](id);
    },
    // 查询
    search() {
      if (!this.keywords) {
        utils.ui.tips({
          msg: "请先输入关键字后再进行搜索",
          type: "warn"
        });
        return;
      }
      // 调用对应的search方法
      this[`${this.type}Search`]();
      // 设置hadSearh为true
      this.hadSearch = true;
    },
    // 选中
    select(item) {
      // 调用对应的select方法
      this[`${this.type}Select`](item);
    },

    // 当前结果行是否active
    isResultLineActive(item) {
      if (this.type === "job") {
        // 职业，code直接对比
        return item.code === this.selectData.code;
      } else if (this.type === "address") {
        // 地区，当前item.code与选中数据的区码相同
        return item.code === this.selectData.areaCode;
      }
    },

    // 返回
    back() {
      if (this.selectType === "search") {
        // search状态：返回到click
        this.selectType = "click";
      } else if (this.selectType === "click") {
        // 关闭页面
        this.$emit("close");
      }
    },

    // clickitem click处理
    handlerClickItemClick(item, deep) {
      // 获取子数据
      if (!item.sonList) {
        item.sonList = this.getNextLevel(item.code);
      }

      if (item.sonList.length === 0) {
        // 查不到子元素了，证明是根节点了，直接调用select方法
        this.select(item);
        return;
      }

      // 不是根节点
      if (deep > this.clickStack.length || deep === "next") {
        // 向下点
        this.clickDeep++;
        // 添加当前点
        this.clickStack.push(item);
      } else if (deep === this.clickStack.length) {
        // 同级点--暂时不存在这种情况
        // 删除原有点
        this.clickStack.pop();
        // 添加当前点
        this.clickStack.push(item);
      } else if (deep < this.clickStack.length) {
        // 回点
        this.clickDeep = deep;
        // 删除下级数据
        this.clickStack.splice(deep);
      }
    },
    // ipt得到焦点
    handlerIptFocus() {
      this.isIptFocus = true;
      this.selectType = "search";
    },
    // ipt失去焦点
    handlerIptBlur() {
      this.isIptFocus = false;
      // ios键盘bug修复
      utils.ui.handlerIOSKeyboardHidden();
    }
  }
};
</script>

<style lang="scss" scoped>
.selector {
  border-top: 1px solid rgba(255, 255, 255, 0);
  position: fixed;
  left: 0;
  top: 0;
  background: #ffffff;
  z-index: $zIndex-popup;
}

// search-bar
.search-bar {
  box-shadow: 0 -2px 8px 0 rgba(0, 0, 0, 0.1);
  background: #ffffff;
  .search-ipt {
    @include reset-input;
    @include display-flex;
    height: 34px;
    line-height: 20px;
    justify-content: flex-start;
    flex: 1;
    background: #f3f3f3;
    border-radius: 17px;
    font-size: 14px;
    color: #000000;
    padding: 0 20px;
    letter-spacing: 1px;
    // x去除
    &::-webkit-search-cancel-button {
      display: none;
    }
    // placeholder样式重写
    &::placeholder {
      font-size: 15px;
      color: #c0c0c0;
      text-align: center;
    }
  }
  .address-tips {
    @include display-flex;
    height: 34px;
    font-size: 15px;
    flex: 1;
    letter-spacing: 1px;
    color: #000000;
  }
  .icon {
    height: auto;
    &.icon-back {
      width: 16px;
      margin-right: 10px;
    }
    &.icon-search {
      width: 25px;
      margin-left: 10px;
    }
  }
}

// 结果
.result-content {
  position: relative;
  padding: 0 20px;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
  .result-line {
    line-height: 30px;
    min-height: 42px;
    font-size: 15px;
    padding: 0 10px;
    border-bottom: 1px solid #f3f3f3;
  }
}

// click-result
.click-result {
  .result-line {
    color: #7e7e7e;
  }
  .inner-top-list {
    margin: 0 -20px;
    padding: 0 20px;
    border-bottom: 4px solid #f3f3f3;
    .result-line {
      font-size: 17px;
      color: $color-theme;
    }
  }
  .inner-bottom-list {
    .result-line {
      &.active {
        color: $color-theme;
      }
    }
  }
}

// search-result
.search-result {
  .result-line {
    color: #333333;
    &.active {
      color: $color-theme;
    }
  }
  // no-data
  .no-data {
    @include display-flex;
    font-size: 15px;
    height: 100px;
    color: #999999;
  }
}
</style>
